<style lang="less" scoped>

</style>
<template>
    <div v-show="drawerShow" class="drawer-left fadeOut">
        <group title="选择">
            <selector title="区域"  :options="areaList" @on-change="areaChange"
                      v-model="dataForm.areaId"></selector>
            <selector title="建筑"  :options="buildList" @on-change="buildChange"
                      v-model="dataForm.buildId"></selector>
        </group>
        <x-button class="btn-device-list" @click.native="change" type="primary">提交</x-button>
        <x-button class="btn-device-list" @click.native="cancelSelect" type="primary">取消</x-button>
    </div>
</template>


<script>
    export default{
        props:{
            show:{
                default:false,
                type:Boolean
            }
        },
        data(){
            return {
                drawerShow:false,
                dataForm:{
                    areaId:0,
                    buildId:0,
                    concentratorId:0,
                    nodeId:0,
                    circuitId:0,
                    search:'',
                    page:1,
                    row:100
                },
                areaList:[],
                buildList:[],
                conList:[],
                nodeList:[],
                circuitList:[],
            }
        },
        watch:{
            show:function(val){
                console.log("ssss")
                this.drawerShow = val;
            }
        },
        components: {},
        computed: {},
        methods: {
            change(){
                this.$emit("onChange",this.dataForm);
            },
            cancelSelect(){
                this.drawerShow  = false;
                this.$emit("showChange",this.drawerShow);
            },
            getArea(){
                let data = {
                    parentId:0,
                    deviceRange:0
                };
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let areas = [];
                    areas.push({
                        key:0,
                        value:'未指定'
                    })
                    if (data.status == 1) {
                        data.result.forEach(function (item,index) {
                            areas.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.areaList = areas;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getBuild(){
                let data = {
                    parentId:this.dataForm.areaId,
                    deviceRange:1
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let builds = [];

                    if (data.status == 1) {
                        builds.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            builds.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.buildList = builds;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCon(){
                let data = {
                    parentId:this.dataForm.buildId,
                    deviceRange:2
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let cons = [];
                    if (data.status == 1) {
                        cons.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            cons.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.conList = cons;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getNode(){
                let data = {
                    parentId:this.dataForm.concentratorId,
                    deviceRange:3
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let nodes = [];
                    if (data.status == 1) {
                        nodes.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            nodes.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.nodeList = nodes;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            getCircuit(){
                let data = {
                    parentId:this.dataForm.nodeId,
                    deviceRange:4
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let circuits = [];
                    if (data.status == 1) {
                        circuits.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            circuits.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.circuitList = circuits;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            areaChange(value){
                this.dataForm.areaId = value;
                this.getBuild();
            },
            buildChange(value){
                this.dataForm.buildId= value;
                this.getCon();
            },
            conChange(value){
                this.dataForm.concentratorId = value;
                this.getNode();
            },
            nodeChange(value){
                this.dataForm.nodeId=value;
                this.getCircuit();
            },
        },
        created: function () {
            this.getArea();
        }
    }
</script>
